<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工程用料统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../resources/css/style.css" media="all">
		<style>
			._PC .demo ul{width: 100% !important;margin-right:2%;overflow: hidden;}
			.allNum{text-align: right;}
			.layui-input-inline {
				width: 80%;
			}
			/*.layui-form-item .layui-input-inline{width: 165px;}*/
			li:before {content: "";}
			.addr,.company{padding-left: 15px;}
			
			.layui-inline {
				margin-bottom: 10px;
			}
			
			.layui-upload {
				text-align: left;
			}
			
			#demo2 img {
				width: 120px;
				height: 120px;
			}
			.detail-list{
				margin-left: 20%;
			}
			.imgs {
				position: relative;
				width: 120px;
				height: 120px;
				float: left;
			}
			
			._ingshan {
				position: absolute;
				right: 0px;
				top: 0px;
				border: 1px solid #E3e3e3;
				border-radius: 50%;
				width: 20px;
				height: 20px;
				text-align: center;
			}
			/*.list td{
				text-align: center;
			}*/
			.sty{
				text-align: right;
			}
			@media only screen and (min-width: 321px) and (max-width: 1024px) {
				.layui-form-pane .layui-input-inline {
					width: 100%;
				}
				._inkong {
					width: auto!important;
				}
				.layui-form-item .layui-input-inline {
					width: 100%;
				}
				._MOVE .company{text-indent: 1em;}
			}
			@media screen and (max-width: 750px) {
				._MOVE .company{padding-left: 0;width: 120%;}
				._MOVE .lists ul .list tbody{width: 120%;}
				._MOVE .lists ul{margin-top: 50px; margin-bottom: 10px;height: auto;}
				._MOVE .lists ul li{width: 120%;}
				.detail-list{margin-left: 50px;}
			}
			
			.layui-form-label {
				padding-left: 0;
				height: 20px;
			}
			.material-mask-top li{
				text-align: left;
				padding: 10px;
				list-style: none;
			}
		
		
			.rm_Code,.eppName,.compName1{
				padding-left: 20px;
			}
			.addr{
				height: 40px;
				line-height: 40px;
				background: gainsboro;
			}
			.addr h3{
				font-size: 20px;
			}
			.company{
				height: 50px;
				line-height:50px;
				background: #fff;
				/*padding-left: 0;*/
			}
			#demo li{
				list-style: none;
			}
			ul{
				margin-bottom: 50px;
			}
			.lists ul{height: 500px;overflow: auto;}
			.lists ul li {width: 100%;overflow-x: auto;}
			/*.lists ul li .list{overflow-x: auto;}*/
			.MOVE_title{display: block;text-align: center;}
		</style>
	</head>

	<body>
	<div class="_PC">
		<form class="layui-form layui-form-pane" action="">
			<div class="formTop" style="font-size:12px;">
				<div class="layui-form-item layui-col-lg2 layui-col-sm3">
					<div class="layui-input-inline">
						<input type="text" name="username" lay-verify="required" placeholder="项目名称或施工单位" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline layui-col-lg2 layui-col-sm3">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test-limit3" placeholder="请选择开始日期">
						<div class="icons">

						</div>
					</div>
				</div>
				<div class="layui-inline layui-col-lg2 layui-col-sm3">

					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test-limit4" placeholder="请选择结束日期">
						<div class="icons">

						</div>
					</div>
				</div>

				<div class="layui-col-lg2 layui-col-sm2">
					<button class="layui-btn check" type="button" onclick="query()">查询</button>

				</div>

			</div>
			<!--<div id="demo">
				<div class="lists"></div>
			</div>-->

			<table class="demo" lay-filter="test">
				<tr class="lists"></tr>
			</table>

		</form>
		<a class="dayin" type="button" id="dlink"  style="float: right; position: fixed; right: 50px; bottom: 50px; z-index: 999;"></a>

	</div>




	<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
	<script src="../../../resources/js/style.js"></script>
	<script src="../../../resources/js/jquery.js"></script>
	<script src="../../../resources/js/api.js"></script>
		<script type="text/javascript">
			
			function query() {
				layui.use(['form', 'layedit', 'laydate', 'table', 'element'], function() {
					var form = layui.form,
						table = layui.table;
					var pronName = $("[name='username']").val();
					var begintime = $('#test-limit3').val();
					var endtime = $('#test-limit4').val();
                    if(!AntiSqlValid(pronName)){
//                        'proName':pronName,'begintime': begintime,'endtime': endtime,'p':getCookie('yanzheng')
                        jiazai({'proName':pronName,'begintime': begintime,'endtime': endtime,'p':getCookie('yanzheng')})

					} else {
						layer.msg('请勿输入特殊符号或敏感文字');
					};
				})

			}
			

            function jiazai(data) {
                ajaxs('/api/material/buildUseMaterTotal.do','post',data,function (data) {   //初次加载页面获取数据
                	var copyArray = {}
					for( var i=0; i<data.data.length; i++ ){
                		copyArray[data.data[i].cc_Code] = copyArray[data.data[i].cc_Code] || [];
                		
                		copyArray[data.data[i].cc_Code].push(data.data[i])
                	}
                	for(var j in copyArray){
                		var dom = '<ul>';
                		var titleData = copyArray[j][0];
                		dom+= '<li class="addr"><h3>'+titleData.proName+'</h3></li>'
                		dom+= '<li class="company">\
							    <span>施工单位：</span>\
							    <span>'+titleData.compName1+'</span>\
							    <span class="detail-list">施工单位负责人：</span>\
							    <span>'+titleData.compPerson1+'</span>\
							 </li>'
                		var innerDom = '';
                		for(var x=0; x<copyArray[j].length; x++){
							innerDom+= '\
								<tr>\
									<td>'+copyArray[j][x].mat_Name+'</td>\
									<td>'+copyArray[j][x].mat_Spec+'</td>\
									<td>'+copyArray[j][x].mat_Bit+'</td>\
									<td>'+(copyArray[j][x].rm_Num || ' ')+'</td>\
								</tr>\
							'    			
                		}
                		dom+= '<li><table class="layui-table list">\
										<thead>\
											<tr><th>材料名称</th><th>材料规格</th><th>材料单位</th><th>材料数量</th> </tr>\
										</thead>\
										<tbody>\
										'+innerDom+'\
										<tr><td colspan="4"><span>材料类型数量：</span><span>'+copyArray[j].length+'</span></td></tr>\
										</tbody>\
                				   </table></li>'
                		
                		dom += '</ul>'
                		$('.lists').append(dom)


                    }
                	//console.log(copyArray, '去重后的数组')

                })
               

            }
            jiazai({'p':getCookie('yanzheng')})
			layui.use(['form', 'layedit', 'laydate', 'table'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					table = layui.table,
					laydate = layui.laydate;
                jiazais();

				//前后若干天可选，这里设置不能选过去的日期      最远可选1000天之后
				panduanshijian('#test-limit3', '#test-limit4', 1000, 1000, '.layui-btn-normal'); //查询 开始结束时间判断

				$(".check").click(function(){
				$(".lists").hide();


				})
                dayintishi('.dayin');

//				API.gongchengyongliao();

				laydate.render({
					elem: '#date'
				});
				

			})
			
			

		</script>



	</body>

</html>